<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column" style="max-width: 500px">
      <t-input v-model="text" label="标题" labelPosition='top' borderType="borderless" />

      <t-input  v-model="text" label="无边框" labelPosition='top' borderType="borderless"   class="tr-input-noborder"/>

       <t-input  v-model="text" label="标题" labelPosition='top' borderType="borderless" placeholder="无边框" hideLabel="true"/>

      <t-input  v-model="text" label="标题" labelPosition='top' borderType="borderless" placeholder="显示清空按钮" :clearable="true" />

      <t-input  v-model="text" label="背景颜色" labelPosition='top' borderType="borderless" bgColor="rgb(103, 183, 121)"/>

      <t-input  borderType="borderless" v-model="text" labelPosition='top' label="前缀图标" prependIcon="search"/>

      <t-input  borderType="borderless"  v-model="text" labelPosition='top' label="后缀图标" appendIcon = "search"/>

      <t-input  borderType="borderless" v-model="text" labelPosition='top' label="前缀文字" prefix="+86"/>

      <t-input borderType="borderless" v-model="text" labelPosition='top' label="后缀文字" suffix="折"/>

      <t-input
      borderType="borderless"
      v-model="text"
      label="问号帮助"
      labelPosition='top'
      :helpConf= true
      helpTooltip='这是一个提示内容'
      helpPlacement='bottom'
     />

      <t-input
      borderType="borderless"
      v-model="text"
      label="必填"
      labelPosition='top'
      :required='true'
      :rules="[ val => !!val || '必填不能为空']"
        />

      <t-input borderType="borderless" labelPosition='top' v-model="text" label="最大字符限制"   :maxLength='3'/>

        <t-input borderType="borderless" labelPosition='top' v-model="text" label="只读" :readonly="true"/>

          <t-input borderType="borderless" labelPosition='top' v-model="text" label="禁用"  :disable="true" />
                      <t-input v-model="text" label="focus事件"  labelPosition='top' borderType="borderless" @focus="handleFocus" />
              <t-input v-model="text" label="change事件"  labelPosition='top' borderType="borderless" @change="handleChange"/>
                <t-input v-model="text" label="blur事件"  labelPosition='top' borderType="borderless" @blur="handleBlur"/>
                  <t-input v-model="text" label="click事件"  labelPosition='top' borderType="borderless" @click="handleClick"/>
                  <t-input v-model="text" label="keydown事件"  labelPosition='top' borderType="borderless" @keydown="handleKeydown"/>
  </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
       const  refInput = ref(null)
      return {
        refInput,
        text: ref(''),
        validate:ref(''),
                handleFocus(){
          alert('focus事件')
        },
            handleChange(){
          alert('change事件')
        },
            handleBlur(){
          alert('blur事件')
        },
            handleClick(){
          alert('click事件')
        },
            handleKeydown(){
          alert('keydown事件')
        },
      };
    },
  };
</script>
